<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <!-- input（text checkbox radio ）  文本域  select  -->
        <input type="text" v-model="msg">
        <textarea v-model="msg" name="" id="" cols="30" rows="10"></textarea><br>
        <!-- 当有一个多选框时  初始值可以设计为布尔值 true false -->
        <input type="checkbox" name="" id="" v-model="check"><br>
        <!-- 当多选框有多个  初始值设计为数组 -->
        <!-- 例如：爱好： 足球 篮球 游戏 抖音 -->
        <input type="checkbox" name="" id="zuqiu" value="足球" v-model="checkArr">
        <label for="zuqiu">足球</label>
        <input type="checkbox" name="" id="lanqiu" value="篮球" v-model="checkArr">
        <label for="lanqiu">篮球</label>
        <h1>{{checkArr}}</h1>

        <!-- 单选框 -->
        <input type="radio" name="sex" id="nan" value="男" v-model="radioValue">
        <label for="nan">男</label><br>
        <input type="radio" name="sex" id="nv" value="女" v-model="radioValue">
        <label for="nv">女</label>
        <h1>{{radioValue}}</h1>
        <!-- select可以单选也可以多选
        默认是单选
        多选  在select上加multiple属性  windows多选时按住 shift ctrl
        -->
        <!-- select 单选时 初始值设置为空串 -->
        <select name="" id="" v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="猪八戒">猪八戒</option>
            <option value="孙悟空">孙悟空</option>
            <option value="白骨精">白骨精</option>
        </select>
        <h1>{{selected}}</h1>
        <!-- 当多选时 初始值设置为空数组 -->
        <select name="" id="" multiple v-model="selectedArr">
            <option value="" disabled>请选择</option>
            <option value="猪八戒">猪八戒</option>
            <option value="孙悟空">孙悟空</option>
            <option value="白骨精">白骨精</option>
        </select>
        <h1>{{selectedArr}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                msg:'对于input框type为text 有值写值 没值就是空串',
                check:false,
                checkArr:[],
                radioValue:'',
                selected:'',
                selectedArr:[]
            }
        })
    </script>
</body>
</html>